怎么用deepseek生成一个H5游戏？
这事其实很简单，就算利用deepseek的chat端环境就能全部完成。
不就HTML5么，就一句话的问题。
首先来句提示词：
利用html，SVG写一个乒乓游戏
然后就出现了下面画面：
下面重点来了，为什么说deepseek的chat端（网页端）就能完成：
猛击代码段下方的：运行HTML
然后出现画面：
是不是一个乒乓游戏？不过这玩意不能算严格意义上电子化乒乓游戏（倒是很像真实生活中乒乓游戏，还双打的。。。）。那就改改提示词，试试能不能做那种消方块的乒乓游戏。
索性就写稍微具体一点，提示词如下：
利用html，SVG写一个上面是需要消除方块，下面是球拍，带计分功能的乒乓游戏
效果就输出如下了：
耶！这玩意还是鼠标控制的！一句提示词，一个简单完整的HTML5游戏就完成了么。一点外部工具都不用（连什么深度推理，网络搜索功能都没用）。
来来再玩一个，让它写一个俄罗斯方块游戏，提示词如下：
利用html，SVG写一个俄罗斯方块游戏
咦！这儿出问题！
它把HTML代码与javaScript代码分开写的，这样就不直接在运行HTML环境直接运行了（其实自己子啊本地跑没什么问题）。解决！也简单让它把两个代码合并成一个代码就行。
看！游戏效果就出来了：
至于游戏如何到本地呢，更简单了。
猛击代码段：复制
本地随便找一个地方，新建txt（新建文本文档），然后把代码粘贴进行去。
保存，然后把文件名后缀改成html就行。
点击打开，游戏效果就出来了
学废了么？
彩蛋！
谁说文本大模型（LLM）不能画图的，给你们画一个看看！
附录：deepseek写的俄罗斯方块游戏代码（忘记加计分功能了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>俄罗斯方块</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
}
#game {
background-color: #000;
}
</style>
</head>
<body>
<svg id="game" width="300" height="600"></svg>
<script>
const svgNS = "http://www.w3.org/2000/svg";
const game = document.getElementById("game");
const width = 10;
const height = 20;
const blockSize = 30;
const board = Array.from({ length: height }, () => Array(width).fill(0));
let currentPiece;
let currentX, currentY;
const pieces = [
[[1, 1, 1, 1]], // I
[[1, 1], [1, 1]], // O
[[0, 1, 0], [1, 1, 1]], // T
[[1, 0, 0], [1, 1, 1]], // L
[[0, 0, 1], [1, 1, 1]], // J
[[0, 1, 1], [1, 1, 0]], // S
[[1, 1, 0], [0, 1, 1]] // Z
];
function createPiece() {
const piece = pieces[Math.floor(Math.random() * pieces.length)];
currentPiece = piece;
currentX = Math.floor((width - piece[0].length) / 2);
currentY = 0;
if (collision()) {
alert("Game Over!");
resetBoard();
}
}
function collision() {
for (let y = 0; y < currentPiece.length; y++) {
for (let x = 0; x < currentPiece[y].length; x++) {
if (currentPiece[y][x] && (board[currentY + y] && board[currentY + y][currentX + x]) !== 0) {
return true;
}
}
}
return false;
}
function placePiece() {
for (let y = 0; y < currentPiece.length; y++) {
for (let x = 0; x < currentPiece[y].length; x++) {
if (currentPiece[y][x]) {
board[currentY + y][currentX + x] = 1;
}
}
}
clearLines();
createPiece();
}
function clearLines() {
for (let y = height - 1; y >= 0; y--) {
if (board[y].every(cell => cell === 1)) {
board.splice(y, 1);
board.unshift(Array(width).fill(0));
}
}
}
function draw() {
game.innerHTML = '';
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (board[y][x]) {
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", x * blockSize);
rect.setAttribute("y", y * blockSize);
rect.setAttribute("width", blockSize);
rect.setAttribute("height", blockSize);
rect.setAttribute("fill", "cyan");
game.appendChild(rect);
}
}
}
if (currentPiece) {
for (let y = 0; y < currentPiece.length; y++) {
for (let x = 0; x < currentPiece[y].length; x++) {
if (currentPiece[y][x]) {
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", (currentX + x) * blockSize);
rect.setAttribute("y", (currentY + y) * blockSize);
rect.setAttribute("width", blockSize);
rect.setAttribute("height", blockSize);
rect.setAttribute("fill", "orange");
game.appendChild(rect);
}
}
}
}
}
function resetBoard() {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
board[y][x] = 0;
}
}
createPiece();
}
function movePiece(dx, dy) {
currentX += dx;
currentY += dy;
if (collision()) {
currentX -= dx;
currentY -= dy;
if (dy === 1) {
placePiece();
}
}
}
function rotatePiece() {
const oldPiece = currentPiece;
currentPiece = currentPiece[0].map((_, i) => currentPiece.map(row => row[i])).reverse();
if (collision()) {
currentPiece = oldPiece;
}
}
document.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowLeft":
movePiece(-1, 0);
break;
case "ArrowRight":
movePiece(1, 0);
break;
case "ArrowDown":
movePiece(0, 1);
break;
case "ArrowUp":
rotatePiece();
break;
}
draw();
});
createPiece();
draw();
setInterval(() => {
movePiece(0, 1);
draw();
}, 1000);
</script>
</body>
</html>
