基于HTML5canvars的小游戏,HTML5之canvas简单射箭小游戏

最近折腾一个自己个人主页，无奈履历太渣，能放在首页的东西不多，于是想给自己的个人主页上添加一个小游戏。遂参考了各种教程，使用HTML5的canvas元素做了一个相当原始的东西出来，效果如图~

QQ截图20160325110909.png

如图所示，右边是一个目标靶子，当我们点击start按钮后它会以一个特定的速度上下来回移动。靶子动起来之后我们点击shoot按钮就会从左边射出一支“箭”(其实就是一条红线啦(⊙﹏⊙))。这支箭射中靶子后根据你射中的位置有0到10十个级别的分数。Ok，接下来是源码。主要是在两个循环里面移动箭和靶子的位置，不断调用制绘制它们的方法。然后用一个主循环不断判定游戏是否终止。

您的浏览器不支持canvas，请使用chrome或者firefox体验~

Start

shoot

var canvas = document.getElementById("canvas");

var cans = canvas.getContext("2d");

cans.strokeStyle = "grey";

cans.strokeRect(0, 0, 360, 500);

cans.moveTo(0, 250);

cans.arc(0, 250, 28, 0.5 * Math.PI, 90 + Math.PI);

cans.stroke();

var targetInterval, arrowInterval;

var started = false;

var targetUp = 0;

var target = {x: 356, y: 10, w: 2, h: 160};

var arrow = {x: 1, y: 250, len: 50};

drawArrow = function () {

cans.fillStyle = 'red';

cans.fillRect(arrow.x, arrow.y, arrow.len, 1);

};

clearArrow = function () {

cans.clearRect(arrow.x, arrow.y - 1, arrow.len, 2);

};

drawTarget = function () {

cans.fillStyle = 'green';

cans.fillRect(target.x, target.y, target.w, target.h);

for (var yi = target.y, xi = target.x, hi = target.h; yi < target.y + target.h / 2; yi += 8, xi -= 2, hi -= 16) {

cans.fillRect(xi, yi, 2, hi);

}

};

clearTarget = function () {

cans.clearRect(target.x - 20, target.y, 22, target.h);

};

drawArrow();

drawTarget();

moveArrow = function () {

clearArrow();

arrow.x += 2;

drawArrow();

};

moveTarget = function () {

clearTarget();

if (targetUp == 0) {

target.y += 2;

if (target.y + target.h > 490) {

targetUp = 1;

}

} else {

target.y -= 2;

if (target.y < 10) {

targetUp = 0;

}

}

drawTarget();

};

function getScore() {

if (arrow.x + arrow.len < target.x - 2 * 9) {

return -1;

}

var yDiff = Math.abs(target.y + target.h / 2 - arrow.y);

var nCircle = Math.floor(yDiff / 8);

var tarX = target.x - 9 * 2 + 2 * nCircle;

if (arrow.x + arrow.len < tarX) {

return -1;

}

if (10 - nCircle < 0) {

return 0;

}

return 10 - nCircle;

}

startGame = function () {

clearArrow();

clearTarget();

started = true;

target.y = 10;

arrow.x = 1;

drawArrow();

drawTarget();

targetUp = 0;

targetInterval = setInterval(moveTarget, 50);

var mainInterval = setInterval(function () {

if (getScore() != -1) {

alert("you get score " + getScore());

clearInterval(arrowInterval);

clearInterval(targetInterval);

clearInterval(mainInterval);

started = false;

}

}, 10);

};

shoot = function () {

if (started) {

arrowInterval = setInterval(moveArrow, 10);

} else {

alert("you should click start first");

}

};