Snake web game code
Snake web game code
<style>
::selection {
color:#FFFFFF;
background:transparent;
}
::-moz-selection {
color:#FFFFFF;
background:transparent;
}
* {
margin:0;
padding:0;
font-family:"VT323";
}
body {
background-color:#000000;
}
.wrap {
margin-left:auto;
margin-right:auto;
}
header {
width:340px;
font-size:0;
}
canvas {
display:none;
border-style:solid;
border-width:10px;
border-color:#FFFFFF;
}
canvas:focus {
outline:none;
}
/* Top Styles */
h1 {
display:inline-block;
width:100px;
font-size:32px;
color:#FFFFFF;
}
.score {
display:inline-block;
width:240px;
font-size:20px;
color:#FFFFFF;
text-align:right;
}
.score_value {
font-size:inherit;
}
/* All screens style */
#gameover a,#setting a,#menu a {
display:block;
}
#gameover a,#setting a:hover,#menu a:hover {
cursor:pointer;
}
#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {
content:">";
margin-right:10px;
}
/* Menu Screen Style */
#menu {
display:block;
width:340px;
padding-top:95px;
padding-bottom:95px;
font-size:40px;
margin-left:auto;
margin-right:auto;
text-align:center;
color:#FFF;
}
#menu h2 {
-webkit-animation:logo-ani 1000ms linear infinite;
animation:logo-ani 1000ms linear infinite;
margin-bottom:30px;
}
#menu a {
font-size:30px;
}
@-webkit-keyframes logo-ani {
50% {
-webkit-transform:scale(1.3,1.3);
}
100% {
-webkit-transform:scale(1.0,1.0);
}
}@keyframes logo-ani {
50% {
transform:scale(1.3,1.3);
}
100% {
transform:scale(1.0,1.0);
}
}/* Game Over Screen Style */
#gameover {
display:none;
width:340px;
padding-top:95px;
padding-bottom:95px;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:30px;
color:#FFF;
}
#gameover p {
margin-top:25px;
font-size:20px;
}
/* Settings Screen Style */
#setting {
display:none;
width:340px;
margin-left:auto;
margin-right:auto;
padding-top:85px;
padding-bottom:85px;
font-size:30px;
color:#FFF;
text-align:center;
}
#setting h2 {
margin-bottom:15px;
}
#setting p {
margin-top:10px;
}
#setting input {
display:none;
}
#setting label {
cursor:pointer;
}
#setting input:checked + label {
background-color:#FFF;
color:#000;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<header class="wrap">
? ? <h1>Snake</h1>
? ? <p class="score">Score: <span id="score_value">0</span></p>
</header>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>
<!-- Game Over Screen -->
<div id="gameover">
? ? <h2>Game Over</h2>
? ? <p>press <span style="background-color: #FFFFFF; color: #000000">space</span> to begin a</p>
? ? <a id="newgame_gameover">new game</a>
? ? <a id="setting_gameover">settings</a>
</div>
<!-- Setting screen -->
<div id="setting">
? ? <h2>Settings</h2>
? ? <a id="newgame_setting">new game</a>
? ? <p>Speed:
? ? ? ? <input id="speed1" type="radio" name="speed" value="120" checked/>
? ? ? ? <label for="speed1">Slow</label>
? ? ? ? <input id="speed2" type="radio" name="speed" value="75" />
? ? ? ? <label for="speed2">Normal</label>
? ? ? ? <input id="speed3" type="radio" name="speed" value="35" />
? ? ? ? <label for="speed3">Fast</label>
? ? </p>
貪吃蛇網(wǎng)頁小游戲代碼是一款簡單黑白風(fēng)格好玩的在線網(wǎng)頁小游戲特效。
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
How Can I Control Snake Growth and Chained Body Movement in a Snake Game?
06 Dec 2024
How to Control the Snake's Growth and Chained Body MovementIn a snake game, the snake's movement is dictated by its head position, and the body...
How To Play The Classic Snake Game In Linux Terminal
22 Mar 2025
Snake is a classic game that has been enjoyed by people of all ages for decades. This simple game is easy to learn but difficult to master, making it a challenge that players of all skill levels can enjoy.In Snake, the player controls a snake that mu
How to Access Object Properties with Special Characters in JavaScript?
01 Jan 2025
Accessing Object Properties with Special CharactersAccessing object properties with special characters, such as periods or other...
Csgo special effects blockbuster movies HD viewing entrance to watch Csgo high-definition special effects blockbuster movies directly
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) is a first-person shooter that is loved by players around the world. Its exciting competitions and high-quality special effects videos have always been topics to talk about by players. Whether it is the thrilling professional leagues or the friendly match between ordinary players, it can show amazing special effects and strategies in the game. This article will introduce you in detail how to find and watch CSGO special effects blockbusters in detail to ensure that you can experience the best visual enjoyment.
What are Douyin's own AI tools?
29 Nov 2024
Douyin provides many of its own AI tools to help creators easily create, edit and promote content, including: intelligent editing, video special effects, subtitle generation, cover generation and other auxiliary content creation. Intelligent recommendations, content review and creation assistance tools improve content quality and dissemination efficiency. Voice changers and more add interest to the content.
How to Animate Snake Movement and Increment its Length in a Game?
03 Dec 2024
How to Animate Snake Movement and Increment Snake LengthScenario: You are developing a snake game where the snake traverses a playing field. Upon...
10 jQuery Cool Menu Effect Plugins
01 Mar 2025
10 cool jQuery menu special effects plug-ins to improve website user experience! We have shared many jQuery navigation menu plugins, and now we bring you 10 more amazing jQuery menu effects plugins. Enjoy it! Related readings: - 10 dazzling jQuery navigation menus - 15 excellent jQuery navigation menus Right-click menu This plugin is very easy to use and compact, allowing you to create right-click menus. Source Code Demo 2. jQuery Multi-level Menu – FX CSS Menu with Submenu 100% CSS menu, visual effects provided by jQuery. Only use Javascript to implement special effects. Fully compatible with cross-browser, package
How to make Windows 11 faster?
28 Jun 2025
1. Disable unnecessary startup items: Turn off network disks, input method additional functions and other power-on startup programs through the task manager; 2. Clean disk space: Use the "Disk Cleanup" tool and enable "Storage Awareness" to automatically clean up junk files; 3. Adjust visual effects: cancel unnecessary special effects in "Performance Options" or select "Best Performance"; 4. Update drivers, close search indexes, and check hard disk status to optimize background services and hardware performance. These methods can effectively improve the smoothness of Windows 11.
How Do I Implement Snake Body Growth and Movement in a Video Game?
11 Dec 2024
How Can I Extend the Snake and Connect Its Body Components During Movement?When implementing a snake video game, you want its body to lengthen...
Hot Tools
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
Simple js love confession artifact
Simple native js love confession artifact
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!