SVG应用：贪吃蛇游戏。使用SVG，Java脚本，CSS和HTML开发了一个简单的游戏。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SVG应用：贪吃蛇游戏 | web176教程网</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
width:100%;
}
.snake {fill: #000;}
.apple {fill: #f00;}
.game-over {border-color: #fcc !important;}
</style>
</head>
<body >
</body>
</html>
<script>
var svgns = "http://www.w3.org/2000/svg",
svg = document.createElementNS(svgns, "svg"),
rectSize = 31,
matrixSize = 15,
matrixLimit = matrixSize - 1;
speedMs = 250;
svg.setAttributeNS(null, 'width', rectSize * matrixSize);
svg.setAttributeNS(null, 'height', rectSize * matrixSize);
svg.setAttributeNS(null, 'style', 'border: ' + rectSize + 'px solid #ccc;');
document.body.appendChild(svg);
var currentX = -1,
currentY = 0,
nextMoveX = 1,
nextMoveY = 0,
snakeL = 5,
swipe = 0,
rectArray = [];
gameIsOver = false;
function drawPoint(x, y) {
var rect = [document.createElementNS(svgns, 'rect'), x, y];
var rectObj = rect[0];
rectObj.setAttributeNS(null, 'x', x * rectSize);
rectObj.setAttributeNS(null, 'y', y * rectSize);
rectObj.setAttributeNS(null, 'height', rectSize);
rectObj.setAttributeNS(null, 'width', rectSize);
rectObj.setAttributeNS(null, 'class', 'snake');
rectArray.push(rect);
svg.appendChild(rectObj);
if (rectArray.length > snakeL) {
svg.removeChild(rectArray[0][0]);
rectArray.shift();
}
}
function setApple() {
var appleX = Math.floor((Math.random() * matrixSize)),
appleY = Math.floor((Math.random() * matrixSize));
apple = [document.createElementNS(svgns, 'rect'), appleX, appleY];
var thisApple = apple[0];
thisApple.setAttributeNS(null, 'x', appleX * rectSize);
thisApple.setAttributeNS(null, 'y', appleY * rectSize);
thisApple.setAttributeNS(null, 'height', rectSize);
thisApple.setAttributeNS(null, 'width', rectSize);
thisApple.setAttributeNS(null, 'class', 'apple');
svg.appendChild(thisApple);
}
function gameOver() {
svg.setAttributeNS(null, 'class', 'game-over');
clearInterval(timing);
alert('GAME OVER!\nYour result is ' + snakeL + '!');
gameIsOver = true;
return;
}
var timing = setInterval(controllingSnake, speedMs);
function controllingSnake() {
var nextX = currentX + nextMoveX,
nextY = currentY + nextMoveY;
rectArray.forEach(function(element){
if (nextX === element[1] && nextY === element[2]) {
gameOver();
};
});
if (nextY < 0 || nextY > matrixLimit || nextX < 0 || nextX > matrixLimit) {
gameOver();
}
if (!gameIsOver) {
if (currentX === apple[1] && currentY === apple[2]) {
snakeL++;
svg.removeChild(apple[0]);
setApple();
}
drawPoint(nextX, nextY);
currentX = nextX;
currentY = nextY;
}
}
function changeDirection(dirCode) {
switch (dirCode) {
case 37:
if (nextMoveX !== 1) {
nextMoveX = -1;
nextMoveY = 0;
}
break;
case 38:
if (nextMoveY !== 1) {
nextMoveX = 0;
nextMoveY = -1;
}
break;
case 39:
if (nextMoveX !== -1) {
nextMoveX = 1;
nextMoveY = 0;
}
break;
case 40:
if (nextMoveY !== -1) {
nextMoveX = 0;
nextMoveY = 1;
}
}
}
document.onkeydown = checkKey;
function checkKey(evt) {
var evt = evt || window.event;
changeDirection(evt.keyCode);
}
function is_touch_device() {
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
}
function startup() {
if (is_touch_device()) {
tStartX = null;
tStartY = null;
document.body.addEventListener("touchstart", handleStart, false);
document.body.addEventListener("touchend", handleEnd, false);
} else {
console.log('Is not touch device');
}
}
function handleStart(evt) {
evt.preventDefault();
tStartX = evt.touches[0].screenX;
tStartY = evt.touches[0].screenY;
}
function handleEnd(evt) {
evt.preventDefault();
var tEndX = evt.changedTouches[0].screenX,
tEndY = evt.changedTouches[0].screenY,
totalX = tStartX - tEndX,
totalY = tStartY - tEndY;
if (Math.abs(totalX) > Math.abs(totalY)) {
swipe = (totalX >= 0) ? 37 : 39;
} else {
swipe = (totalY >= 0) ? 38 : 40;
}
changeDirection(swipe);
}
setApple();
</script>作者：terry，如若转载，请注明出处：https://www.web176.com/svgtag/1458.html
支付宝 
微信 