张瑞 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>逆向思维编程示例</title>
</head>
<body>
<button id="myButton">点击我</button>
<p id="messageArea"></p>
<script>
// 获取按钮和显示区的元素
const button = document.getElementById('myButton');
const messageArea = document.getElementById('messageArea');
// 为按钮添加点击事件
button.addEventListener('click', function() {
messageArea.textContent = "你好，世界！";
});
</script>
</body>
</html>

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

/* styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#gameCanvas {
background-color: #fff;
border: 1px solid #000;
}

复制代码

// script.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let snake = [
{ x: 200, y: 200 },
{ x: 190, y: 200 },
{ x: 180, y: 200 },
];
let dx = 10;
let dy = 0;
let foodX;
let foodY;
function createFood() {
foodX = Math.floor(Math.random() * 40) * 10;
foodY = Math.floor(Math.random() * 40) * 10;
}
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokestyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
function main() {
if (gameOver()) return;
setTimeout(function onTick() {
clearCanvas();
drawFood();
moveSnake();
drawSnake();
main();
}, 100);
}
function gameOver() {
for (let i = 4; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
}
const hitLeftWall = snake[0].x < 0;
const hitRightWall = snake[0].x > canvas.width - 10;
const hitTopWall = snake[0].y < 0;
const hitBottomWall = snake[0].y > canvas.height - 10;
return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.strokestyle = 'darkred';
ctx.fillRect(foodX, foodY, 10, 10);
ctx.strokeRect(foodX, foodY, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
const isEatingFood = snake[0].x === foodX && snake[0].y === foodY;
if (isEatingFood) {
createFood();
} else {
snake.pop();
}
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
document.addEventListener('keydown', changeDirection);
createFood();
main();

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="gameInfo">
<span id="score">得分: 0</span>
<button id="restartButton" style="display:none;">重新开始</button>
</div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

/* styles.css */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#gameCanvas {
background-color: #fff;
border: 1px solid #000;
}
#gameInfo {
margin-bottom: 10px;
}
#restartButton {
margin-top: 10px;
padding: 5px 10px;
font-size: 16px;
}

复制代码

// script.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let score = 0;
let snake = [{ x: 200, y: 200 }];
let dx = 10;
let dy = 0;
let foodX;
let foodY;
let changingDirection = false;
document.getElementById('restartButton').onclick = restartGame;
document.addEventListener('keydown', changeDirection);
function main() {
if (gameOver()) {
document.getElementById('restartButton').style.display = 'block';
return;
}
setTimeout(function onTick() {
changingDirection = false;
clearCanvas();
drawFood();
moveSnake();
drawSnake();
main();
}, 100);
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
function drawSnake() {
snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
ctx.fillStyle = 'lightgreen';
ctx.strokestyle = 'darkgreen';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.strokestyle = 'darkred';
ctx.fillRect(foodX, foodY, 10, 10);
ctx.strokeRect(foodX, foodY, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
const hasEatenFood = snake[0].x === foodX && snake[0].y === foodY;
if (hasEatenFood) {
score += 10;
document.getElementById('score').innerHTML = '得分: ' + score;
createFood();
} else {
snake.pop();
}
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
if (changingDirection) return;
changingDirection = true;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
function gameOver() {
for (let i = 4; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
}
const hitLeftWall = snake[0].x < 0;
const hitRightWall = snake[0].x > canvas.width - 10;
const hitTopWall = snake[0].y < 0;
const hitBottomWall = snake[0].y > canvas.height - 10;
return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
}
function createFood() {
foodX = Math.floor(Math.random() * 39 + 1) * 10;
foodY = Math.floor(Math.random() * 39 + 1) * 10;
snake.forEach(part => {
const hasEaten = part.x === foodX && part.y === foodY;
if (hasEaten) createFood();
});
}
function restartGame() {
score = 0;
document.getElementById('score').innerHTML = '得分: 0';
snake = [{ x: 200, y: 200 }];
dx = 10;
dy = 0;
document.getElementById('restartButton').style.display = 'none';
createFood();
main();
}
createFood();
main();

复制代码