PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：[春节创意投稿大赛] (juejin.cn/post/704918… "juejin.cn/post/704918…
前言
又是一个春节到。岁月往复，季节交替，虎年迎来牛年过，祝福没变，关怀还在。送上问候，传递相思，新年快乐，好运滚滚。
游戏规则
按住鼠标监听老虎进行左右移动来躲避年兽，拾得福袋。拾得福袋越多，则越腻害。
开局遇到年兽则如图：
抢到福袋则如图：
页面布局
页面布局没啥好说的，代码
<div id="container">
<div id="guidePanel"></div>
<div id="gamepanel">
<div class="score-wrap">
<div class="heart"></div>
<span id="score">0</span>
<!-- 福袋数量 -->
</div>
<canvas id="stage" width="320" height="568"></canvas>
</div>
<div id="gameoverPanel"></div>
<div id="resultPanel">
<div class="weixin-share"></div>
<a href="javascript:void(0)" class="replay"></a>
<div id="fenghao"></div>
<div id="scorecontent">
您在<span id="stime" class="lighttext">8</span>秒内抢到了
<span id="sscore" class="lighttext">13</span>个福袋<br>超过了
<span id="suser" class="lighttext">1%</span>的用户！
</div>
<div class="textc">
<span class="btn1 share">请小伙伴抢福袋</span>
</div>
</div>
</div>
老虎
function Ship(ctx){
gameMonitor.im.loadImage(['static/img/player.png']);
this.width = 80;
this.height = 80;
this.left = gameMonitor.w/2 - this.width/2;
this.top = gameMonitor.h - 2*this.height;
this.player = gameMonitor.im.createImage('static/img/player.png');
this.paint = function(){
ctx.drawImage(this.player, this.left, this.top, this.width, this.height);
}
this.setPosition = function(event){
if(gameMonitor.isMobile()){
var tarL = event.changedTouches[0].clientX;
var tarT = event.changedTouches[0].clientY;
}
else{
var tarL = event.offsetX;
var tarT = event.offsetY;
}
this.left = tarL - this.width/2 - 16;
this.top = tarT - this.height/2;
if(this.left<0){
this.left = 0;
}
if(this.left>320-this.width){
this.left = 320-this.width;
}
if(this.top<0){
this.top = 0;
}
if(this.top>gameMonitor.h - this.height){
this.top = gameMonitor.h - this.height;
}
this.paint();
}
this.controll = function(){
var _this = this;
var stage = $('#gamepanel');
var currentX = this.left,
currentY = this.top,
move = false;
stage.on(gameMonitor.eventType.start, function(event){
_this.setPosition(event);
move = true;
}).on(gameMonitor.eventType.end, function(){
move = false;
}).on(gameMonitor.eventType.move, function(event){
event.preventDefault();
if(move){
_this.setPosition(event);
}
});
}
this.eat = function(foodlist){
for(var i=foodlist.length-1; i>=0; i--){
var f = foodlist[i];
if(f){
var l1 = this.top+this.height/2 - (f.top+f.height/2);
var l2 = this.left+this.width/2 - (f.left+f.width/2);
var l3 = Math.sqrt(l1*l1 + l2*l2);
if(l3<=this.height/2 + f.height/2){
foodlist[f.id] = null;
if(f.type==0){
gameMonitor.stop();
$('#gameoverPanel').show();
setTimeout(function(){
$('#gameoverPanel').hide();
$('#resultPanel').show();
gameMonitor.getScore();
}, 2000);
}
else{
$('#score').text(++gameMonitor.score);
$('.heart').removeClass('hearthot').addClass('hearthot');
setTimeout(function() {
$('.heart').removeClass('hearthot')
}, 200);
}
}
}
}
}
}
福袋
genorateFood : function(){
var genRate = 50; //产生福袋的频率
var random = Math.random();
if(random*genRate>genRate-1){
var left = Math.random()*(this.w - 50);
var type = Math.floor(left)%2 == 0 ? 0 : 1;
var id = this.foodList.length;
var f = new Food(type, left, id);
this.foodList.push(f);
}
},
最后得到福袋数量
getScore : function(){
// 时间
var time = Math.floor(this.time/60);
// 福袋
var score = this.score;
// 用户
var user = 1;
// 判断福袋数量
if(score==0){ //一个没有或者遇到年兽
$('#scorecontent').html('真遗憾，您竟然<span class="lighttext">一个</span>福袋都没有抢到！');
$('.btn1').text('重新开始').removeClass('share').addClass('playagain');
$('#fenghao').removeClass('geili yinhen').addClass('yinhen');
return;
}
else if(score<10){
user = 2;
}
else if(score>10 && score<=20){
user = 10;
}
else if(score>20 && score<=40){
user = 40;
}
else if(score>40 && score<=60){
user = 80;
}
else if(score>60 && score<=80){
user = 92;
}
else if(score>80){
user = 99;
}
// 否则
$('#fenghao').removeClass('geili yinhen').addClass('geili');
$('#scorecontent').html('您在<span id="stime" class="lighttext">2378</span>秒内抢到了<span id="sscore" class="lighttext">21341</span>个福袋<br>超过了<span id="suser" class="lighttext">31%</span>的用户！');
$('#stime').text(time);
$('#sscore').text(score);
$('#suser').text(user+'%');
$('.btn1').text('请小伙伴抢福袋').removeClass('playagain').addClass('share');
},
结束
文章到此结束了，看完了能点个赞支持一下嘛 谢谢了(๑╹◡╹)ﾉ"""
