SVG应用：贪吃蛇游戏

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>

HTML
​x
 
<!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>

阅读剩余 85%

作者：terry，如若转载，请注明出处：https://www.web176.com/svgtag/1458.html

SVG应用：贪吃蛇游戏

相关推荐

发表回复

分享到: