{
    "key_pair_value_system": true,
    "answer_rating_count": "",
    "question_feedback_html": {
        "html_star": "",
        "html_star_feedback": ""
    },
    "answer_average_rating_value": "",
    "answer_date_js": "2024-09-09T15:23:39-04:00",
    "answer_date": "2024-09-09 15:23:39",
    "is_docs_available": null,
    "is_excel_available": null,
    "is_pdf_available": null,
    "count_file_available": 0,
    "main_page": "student_question_view",
    "question_id": "9876067",
    "url": "\/study-help\/questions\/how-do-i-create-a-game-menu-with-a-start-9876067",
    "question_creation_date_js": "2024-09-09T15:23:39-04:00",
    "question_creation_date": "Sep 09, 2024 03:23 PM",
    "meta_title": "[Solved] How do I create a game menu with a start | SolutionInn",
    "meta_description": "Answer of - How do I create a game menu with a start button to start the game? Thank you. code: #hero { \/* background: #ff0000; *\/ | SolutionInn",
    "meta_keywords": "create,game,menu,start,button,thank,code,hero,\/*,background,ff0000,*\/",
    "question_title_h1": "How do I create a game menu with a start button to start the game? Thank you. code: #hero { \/* background: #ff0000; *\/ background-image:",
    "question_title": "How do I create a game menu with a start button to",
    "question_title_for_js_snippet": "How do I create a game menu with a start button to start the game  Thank you  code   hero      background   ff0000     background image  url( man of space png )  width  40px  height  40px  position  absolute     background   background image  url( space png )     background   000000     height  100   background position  center     laser   background   00ff00  width  2px  height  50px  position  absolute     enemy   background image  url( spaceship png )  background size  40px 40px  width  40px  height  40px  position  absolute     score   color   ffffff  font size  18pt  position  absolute  left  20px  top  20px     gameover   color   ff0000  font size  20px  position  absolute  left  160px  top  200px  visibility  hidden    GAME OVER var LEFT KEY   37  var UP KEY   38  var RIGHT KEY   39  var DOWN KEY   40  var SPACE KEY   32  var HERO MOVEMENT   3  var lastLoopRun   0  var score   0  var iterations   0  var controller   new Object()  var enemies   new Array()  function createSprite(element, x, y, w, h)   var result   new Object()  result element   element  result x   x  result y   y  result w   w  result h   h  return result    function toggleKey(keyCode, isPressed)   if (keyCode    LEFT KEY)   controller left   isPressed    if (keyCode    RIGHT KEY)   controller right   isPressed    if (keyCode    UP KEY)   controller up   isPressed    if (keyCode    DOWN KEY)   controller down   isPressed    if (keyCode    SPACE KEY)   controller space   isPressed      function intersects(a, b)   return a x   b x   b w    a x   a w   b x    a y   b y   b h    a y   a h   b y    function ensureBounds(sprite, ignoreY)   if (sprite x   20)   sprite x   20    if ( ignoreY    sprite y   20)   sprite y   20    if (sprite x   sprite w   480)   sprite x   480   sprite w    if ( ignoreY    sprite y   sprite h   480)   sprite y   480   sprite h      function setPosition(sprite)   var e   document getElementById(sprite element)  e style left   sprite x   'px'  e style top   sprite y   'px'    function handleControls()   if (controller up)   hero y    HERO MOVEMENT    if (controller down)   hero y    HERO MOVEMENT    if (controller left)   hero x    HERO MOVEMENT    if (controller right)   hero x    HERO MOVEMENT    if (controller space)   var laser   getFireableLaser()  if (laser)   laser x   hero x   9  laser y   hero y   laser h      ensureBounds(hero)    function getFireableLaser()   var result   null  for (var i   0  i   lasers length  i  )   if (lasers i  y   500)   var element   document getElementById(enemies i  element)  element style visibility   'hidden'  element parentNode removeChild(element)  enemies splice(i, 1)  i          function gameOver()   var element   document getElementById(hero element)  element style visibility   'hidden'  element   document getElementById('gameover')  element style visibility   'visible'    function showSprites()   setPosition(hero)  for (var i   0  i   lasers length  i  )   setPosition(lasers i )    for (var i   0  i   enemies length  i  )   setPosition(enemies i )    var scoreElement   document getElementById('score')  scoreElement innerHTML   'SCORE  '   score    function updatePositions()   for (var i   0  i   enemies length  i  )   enemies i  y    4  enemies i  x    getRandom(7)   3  ensureBounds(enemies i , true)    for (var i   0  i   lasers length  i  )   lasers i  y    12      function addEnemy()   var interval   50  if (iterations   1500)   interval   5    else if (iterations   1000)   interval   20    else if (iterations   500)   interval   35    if (getRandom(interval)    0)   var elementName   'enemy'   getRandom(10000000)  var enemy   createSprite(elementName, getRandom(450),  40, 35, 35)  var element   document createElement('div')  element id   enemy element  element className   'enemy'  document children 0  appendChild(element)  enemies enemies length    enemy      function getRandom(maxSize)   return parseInt(Math random()   maxSize)    function loop()   if (new Date() getTime()   lastLoopRun   40)   updatePositions()  handleControls()  checkCollisions()  addEnemy()  showSprites()  lastLoopRun   new Date() getTime()  iterations      setTimeout('loop() ', 2)    document onkeydown   function(evt)   toggleKey(evt keyCode, true)     document onkeyup   function(evt)   toggleKey(evt keyCode, false)     var hero   createSprite('hero', 250, 460, 20, 20)  var lasers   new Array()  for (var i   0  i   3  i  )   lasers i    createSprite('laser'   i, 0,  120, 2, 50)    loop() ",
    "question_description": "<p>How do I create a game menu with a start button to start the game? Thank you.<\/p> <p>code:<\/p> <p><html><\/p> <p><head><\/p> <p><style><\/p> <p>#hero {<\/p> <p>\/* background: #ff0000; *\/<\/p> <p>background-image: url(\"man-of-space.png\");<\/p> <p>width: 40px;<\/p> <p>height: 40px;<\/p> <p>position: absolute;<\/p> <p>}<\/p> <p>#background {<\/p> <p>background-image: url(\"space.png\");<\/p> <p>\/* background: #000000; *\/<\/p> <p>height: 100%; background-position: center;<\/p> <p>}<\/p> <p>.laser {<\/p> <p>background: #00ff00;<\/p> <p>width: 2px;<\/p> <p>height: 50px;<\/p> <p>position: absolute;<\/p> <p>}<\/p> <p>.enemy {<\/p> <p>background-image: url(\"spaceship.png\");<\/p> <p>background-size: 40px 40px;<\/p> <p>width: 40px;<\/p> <p>height: 40px;<\/p> <p>position: absolute;<\/p> <p>}<\/p> <p>#score {<\/p> <p>color: #ffffff;<\/p> <p>font-size: 18pt;<\/p> <p>position: absolute;<\/p> <p>left: 20px;<\/p> <p>top: 20px;<\/p> <p>}<\/p> <p>#gameover {<\/p> <p>color: #ff0000;<\/p> <p>font-size: 20px;<\/p> <p>position: absolute;<\/p> <p>left: 160px;<\/p> <p>top: 200px;<\/p> <p>visibility: hidden;<\/p> <p>}<\/p> <p><\/style><\/p> <p><\/head><\/p> <p><body><\/p> <p><div id=\"background\"><\/div><\/p> <p><div id=\"hero\"><\/div><\/p> <p><div id=\"laser0\"><\/div><\/p> <p><div id=\"laser1\"><\/div><\/p> <p><div id=\"laser2\"><\/div><\/p> <p><div id=\"score\"><\/div><\/p> <p><div id=\"gameover\">GAME OVER<\/div><\/p> <p><script><\/p> <p>var LEFT_KEY = 37;<\/p> <p>var UP_KEY = 38;<\/p> <p>var RIGHT_KEY = 39;<\/p> <p>var DOWN_KEY = 40;<\/p> <p>var SPACE_KEY = 32;<\/p> <p>var HERO_MOVEMENT = 3;<\/p> <p>var lastLoopRun = 0;<\/p> <p>var score = 0;<\/p> <p>var iterations = 0;<\/p> <p>var controller = new Object();<\/p> <p>var enemies = new Array();<\/p> <p>function createSprite(element, x, y, w, h) {<\/p> <p>var result = new Object();<\/p> <p>result.element = element;<\/p> <p>result.x = x;<\/p> <p>result.y = y;<\/p> <p>result.w = w;<\/p> <p>result.h = h;<\/p> <p>return result;<\/p> <p>}<\/p> <p>function toggleKey(keyCode, isPressed) {<\/p> <p>if (keyCode == LEFT_KEY) {<\/p> <p>controller.left = isPressed;<\/p> <p>}<\/p> <p>if (keyCode == RIGHT_KEY) {<\/p> <p>controller.right = isPressed;<\/p> <p>}<\/p> <p>if (keyCode == UP_KEY) {<\/p> <p>controller.up = isPressed;<\/p> <p>}<\/p> <p>if (keyCode == DOWN_KEY) {<\/p> <p>controller.down = isPressed;<\/p> <p>}<\/p> <p>if (keyCode == SPACE_KEY) {<\/p> <p>controller.space = isPressed;<\/p> <p>}<\/p> <p>}<\/p> <p>function intersects(a, b) {<\/p> <p>return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;<\/p> <p>}<\/p> <p>function ensureBounds(sprite, ignoreY) {<\/p> <p>if (sprite.x < 20) {<\/p> <p>sprite.x = 20;<\/p> <p>}<\/p> <p>if (!ignoreY && sprite.y < 20) {<\/p> <p>sprite.y = 20;<\/p> <p>}<\/p> <p>if (sprite.x + sprite.w > 480) {<\/p> <p>sprite.x = 480 - sprite.w;<\/p> <p>}<\/p> <p>if (!ignoreY && sprite.y + sprite.h > 480) {<\/p> <p>sprite.y = 480 - sprite.h;<\/p> <p>}<\/p> <p>}<\/p> <p>function setPosition(sprite) {<\/p> <p>var e = document.getElementById(sprite.element);<\/p> <p>e.style.left = sprite.x + 'px';<\/p> <p>e.style.top = sprite.y + 'px';<\/p> <p>}<\/p> <p>function handleControls() {<\/p> <p>if (controller.up) {<\/p> <p>hero.y -= HERO_MOVEMENT;<\/p> <p>}<\/p> <p>if (controller.down) {<\/p> <p>hero.y += HERO_MOVEMENT;<\/p> <p>}<\/p> <p>if (controller.left) {<\/p> <p>hero.x -= HERO_MOVEMENT;<\/p> <p>}<\/p> <p>if (controller.right) {<\/p> <p>hero.x += HERO_MOVEMENT;<\/p> <p>}<\/p> <p>if (controller.space) {<\/p> <p>var laser = getFireableLaser();<\/p> <p>if (laser) {<\/p> <p>laser.x = hero.x + 9;<\/p> <p>laser.y = hero.y - laser.h;<\/p> <p>}<\/p> <p>}<\/p> <p>ensureBounds(hero);<\/p> <p>}<\/p> <p>function getFireableLaser() {<\/p> <p>var result = null;<\/p> <p>for (var i = 0; i < lasers.length; i++) {<\/p> <p>if (lasers[i].y <= -120) {<\/p> <p>result = lasers[i];<\/p> <p>}<\/p> <p>}<\/p> <p>return result;<\/p> <p>}<\/p> <p>function getIntersectingLaser(enemy) {<\/p> <p>var result = null;<\/p> <p>for (var i = 0; i < lasers.length; i++) {<\/p> <p>if (intersects(lasers[i], enemy)) {<\/p> <p>result = lasers[i];<\/p> <p>break;<\/p> <p>}<\/p> <p>}<\/p> <p>return result;<\/p> <p>}<\/p> <p>function checkCollisions() {<\/p> <p>for (var i = 0; i < enemies.length; i++) {<\/p> <p>var laser = getIntersectingLaser(enemies[i]);<\/p> <p>if (laser) {<\/p> <p>var element = document.getElementById(enemies[i].element);<\/p> <p>element.style.visibility = 'hidden';<\/p> <p>element.parentNode.removeChild(element);<\/p> <p>enemies.splice(i, 1);<\/p> <p>i--;<\/p> <p>laser.y = -laser.h;<\/p> <p>score += 100;<\/p> <p>} else if (intersects(hero, enemies[i])) {<\/p> <p>gameOver();<\/p> <p>} else if (enemies[i].y + enemies[i].h >= 500) {<\/p> <p>var element = document.getElementById(enemies[i].element);<\/p> <p>element.style.visibility = 'hidden';<\/p> <p>element.parentNode.removeChild(element);<\/p> <p>enemies.splice(i, 1);<\/p> <p>i--;<\/p> <p>}<\/p> <p>}<\/p> <p>}<\/p> <p>function gameOver() {<\/p> <p>var element = document.getElementById(hero.element);<\/p> <p>element.style.visibility = 'hidden';<\/p> <p>element = document.getElementById('gameover');<\/p> <p>element.style.visibility = 'visible';<\/p> <p>}<\/p> <p>function showSprites() {<\/p> <p>setPosition(hero);<\/p> <p>for (var i = 0; i < lasers.length; i++) {<\/p> <p>setPosition(lasers[i]);<\/p> <p>}<\/p> <p>for (var i = 0; i < enemies.length; i++) {<\/p> <p>setPosition(enemies[i]);<\/p> <p>}<\/p> <p>var scoreElement = document.getElementById('score');<\/p> <p>scoreElement.innerHTML = 'SCORE: ' + score;<\/p> <p>}<\/p> <p>function updatePositions() {<\/p> <p>for (var i = 0; i < enemies.length; i++) {<\/p> <p>enemies[i].y += 4;<\/p> <p>enemies[i].x += getRandom(7) - 3;<\/p> <p>ensureBounds(enemies[i], true);<\/p> <p>}<\/p> <p>for (var i = 0; i < lasers.length; i++) {<\/p> <p>lasers[i].y -= 12;<\/p> <p>}<\/p> <p>}<\/p> <p>function addEnemy() {<\/p> <p>var interval = 50;<\/p> <p>if (iterations > 1500) {<\/p> <p>interval = 5;<\/p> <p>} else if (iterations > 1000) {<\/p> <p>interval = 20;<\/p> <p>} else if (iterations > 500) {<\/p> <p>interval = 35;<\/p> <p>}<\/p> <p> <\/p> <p>if (getRandom(interval) == 0) {<\/p> <p>var elementName = 'enemy' + getRandom(10000000);<\/p> <p>var enemy = createSprite(elementName, getRandom(450), -40, 35, 35);<\/p> <p> <\/p> <p>var element = document.createElement('div');<\/p> <p>element.id = enemy.element;<\/p> <p>element.className = 'enemy';<\/p> <p>document.children[0].appendChild(element);<\/p> <p> <\/p> <p>enemies[enemies.length] = enemy;<\/p> <p>}<\/p> <p>}<\/p> <p>function getRandom(maxSize) {<\/p> <p>return parseInt(Math.random() * maxSize);<\/p> <p>}<\/p> <p>function loop() {<\/p> <p>if (new Date().getTime() - lastLoopRun > 40) {<\/p> <p>updatePositions();<\/p> <p>handleControls();<\/p> <p>checkCollisions();<\/p> <p> <\/p> <p>addEnemy();<\/p> <p> <\/p> <p>showSprites();<\/p> <p> <\/p> <p>lastLoopRun = new Date().getTime();<\/p> <p>iterations++;<\/p> <p>}<\/p> <p>setTimeout('loop();', 2);<\/p> <p>}<\/p> <p>document.onkeydown = function(evt) {<\/p> <p>toggleKey(evt.keyCode, true);<\/p> <p>};<\/p> <p>document.onkeyup = function(evt) {<\/p> <p>toggleKey(evt.keyCode, false);<\/p> <p>};<\/p> <p>var hero = createSprite('hero', 250, 460, 20, 20);<\/p> <p>var lasers = new Array();<\/p> <p>for (var i = 0; i < 3; i++) {<\/p> <p>lasers[i] = createSprite('laser' + i, 0, -120, 2, 50);<\/p> <p>}<\/p> <p>loop();<\/p> <p><\/script><\/p> <p><\/body><\/p> <p><\/html><\/p>",
    "transcribed_text": "",
    "related_book": {
        "title": null,
        "isbn": null,
        "edition": null,
        "authors": null,
        "cover_image": null,
        "uri": null,
        "see_more_uri": ""
    },
    "free_related_book": {
        "isbn": "",
        "uri": "",
        "name": "",
        "edition": ""
    },
    "question_posted": "2024-09-09 15:23:39",
    "see_more_questions_link": "\/study-help\/questions\/computer-science-operating-system-2022-August-09",
    "step_by_step_answer": "The Answer is in the image, click to view ...",
    "students_also_viewed": [
        {
            "url": "\/study-help\/modern-mathematical-statistics-with-applications\/617-suppose-that-x1-x2-are-independent-and-px0p-let-1986383",
            "description": "=+6.17. Suppose that X1, X2,... are independent and P[X=0]=p. Let L,, be the length of the run of O's starting at the nth place: L,k if X,, = ... = Xn+k-1 =0X+ Show that P[L, 2, i.o.] is 0 or 1...",
            "stars": 0
        },
        {
            "url": "\/on-december-31-2008-before-the-books-were-closed-the",
            "description": "On December 31, 2008, before the books were closed, the management and accountants of Keltner Inc. made the following determinations about three depreciable assets. 1. Depreciable asset A was...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/breakeven-sales-under-present-and-proposed-conditions-portmann-company-operating-10002803",
            "description": "Break-Even Sales Under Present and Proposed Conditions Portmann Company, operating at full capacity, sold 1,000,000 units at a price of $189 per unit during the current year. Its income statement is...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/current-attempt-in-progress-crane-inc-has-a-customer-loyalty-6211630",
            "description": "Current Attempt in Progress Crane Inc. has a customer loyalty program that rewards a customer with 1 customer loyalty point for every $10 of purchases. Each point is redeemable for a $3 discount on...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/bob-jonas-is-a-single-parent-who-has-been-divorced-5600115",
            "description": "Bob Jonas is a single parent who has been divorced for two years and who provides a home for his 10-year old dependent son. What filing status should Bob use? Select one: a. Married Filing Separate...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/1-a-rigid-container-contains-saturated-water-at-a-pressure-8651195",
            "description": "1. A rigid container contains saturated water at a pressure of 2 bar and a quality of 0.64. The water undergoes a process in which it is heated to a final temperature of 540C. Determine the final...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/you-and-two-other-workers-witness-two-trucks-collide-on-5161691",
            "description": "You and two other workers witness two trucks collide on a construction site. One driver is injured and requires first aid. You have no training in applying first aid but know there is a trained first...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/prepare-the-income-statement-for-crystal-bay-company-for-the-5426645",
            "description": "Prepare the income statement for Crystal Bay Company for the most recent year. Us Next question cost of goods sold, cost of goods manutactured, and the amounts below. Assume that the company sold...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/trim-corporation-acquired-100-percent-of-round-corporations-voting-common-5796539",
            "description": "Trim Corporation acquired 100 percent of Round Corporation's voting common stock on January 1, 20X2, for $416,000. At that date, the book values and fair values of Round's assets and liabilities were...",
            "stars": 3
        }
    ],
    "next_back_navigation": {
        "previous": "\/study-help\/questions\/break-even-sales-and-sales-to-realize-operating-income-9876066",
        "next": "\/study-help\/questions\/question-4-on-january-1-2017-shamrock-co-leased-a-9876068"
    },
    "breadcrumbs": [
        {
            "name": "Study help",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers"
        },
        {
            "name": "Computer Science",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers\/computer-science"
        },
        {
            "name": "Databases",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions\/computer-science-databases"
        },
        {
            "name": "How do I create a game menu with a start button to",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions\/how-do-i-create-a-game-menu-with-a-start-9876067"
        }
    ],
    "skill_details": {
        "skill_id": "656",
        "skill_name": "Databases",
        "parent_id": "8"
    }
}